<template>
  <div class="page">

        <div class="line_search">
            <el-cascader
               v-model="value"
               :options="treeData"
               @change="handleChange"></el-cascader>

            <el-select
              style="margin-left: 20px;"
              v-model="queryParams.locate">
              <el-option label="中文" value="zh"></el-option>
              <el-option label="英语" value="en"></el-option>
              <el-option label="法语" value="fr"></el-option>
              <el-option label="日语" value="ja"></el-option>
            </el-select>
             <button class="add" @click="fetchList">搜索</button>
             <button class="add" @click="add" @custom-event="fetchList">新增</button>
        </div>



        <div class="content">
          <div class="table_container">
                <el-table
                border
                  :data="tableData">

                  <el-table-column
                    align="center"
                    prop="fileTypeLable"
                    label="文件类型">
                  </el-table-column>

                  <el-table-column
                    prop="imageUrl"
                    label="图片"
                    align="center">
                    <template slot-scope="scope">
                       <el-image
                            style="width: 60px; height: 60px"
                            :src="imageHost+scope.row.imageUrl"
                            :preview-src-list="[imageHost + scope.row.imageUrl]"
                              />
                    </template>
                  </el-table-column>

                  <el-table-column
                    prop="videoUrl"
                    label="视频"
                    align="center">
                    <template slot-scope="scope">
                       <el-image
                            v-if="scope.row.videoUrl"
                            style="width: 60px; height: 60px"
                            :src="imageHost+scope.row.videoUrl"
                            :preview-src-list="[imageHost + scope.row.videoUrl]"
                              />
                    </template>
                  </el-table-column>

                  <el-table-column
                    align="center"
                    prop="title"
                    label="标题">
                  </el-table-column>

                  <el-table-column
                    align="center"
                    prop="description"
                    label="描述">
                  </el-table-column>


                  <!-- element UI  el-table组件怎么在点击某一行的按钮后获取某一行的实体数据 -->
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">修改</el-button>
                      <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">删除</el-button>
                    </template>
                  </el-table-column>
                  <!-- 删除   弹窗是否删除  确定后调接口   更新列表 -->

                </el-table>

          </div>

        </div>


        <AddBannerDialog @custom-event="fetchList" ref="addDialog"></AddBannerDialog>
        <!-- 使用子组件并监听自定义事件
        当父组件的 parentMessage 发生变化时，子组件也会相应地更新它的 message prop。 -->

        <UpdateBannerDialog :form="form"  @custom-event="fetchList" ref="updateDialog"></UpdateBannerDialog>

        <DeleteDialog :formId="formId" @delete-event="onSubmitDelete" ref="deleteDialog"></DeleteDialog>

  </div>

</template>

<script>

     // 引入js文件
    import { getBannerList ,getSectionTree,getBannerListBySection,deleteBanner} from '@/api/system/home_banner';
    import AddBannerDialog from './components/AddBannerDialog.vue'
    import UpdateBannerDialog from './components/UpdateBannerDialog.vue';
    import DeleteDialog from '@/components/DeleteDialog.vue';
    // 注册组件

    import { imageHost } from '@/api/ImageHost';

    export default{
      components:{
        AddBannerDialog,UpdateBannerDialog,DeleteDialog
      },
      data(){
        return{
          // 存放选中的每个节点的value值
          value: [],
          imageHost:'',
          tableData:[],
          queryParams:{
            pageNum:1,
            pageSize:7,
            deviceType:'pc',
            locate:'zh'
          },
          form: {
              title: '',
              titleEn: '',
              description: '',
              descriptionEn: '',
              imageUrl:'',
              id:-1,
              // 要添加该字段，不然UpdateDialog接收不到该字段
              fileType:'',
              videoUrl:''
          },
          formId:-1,
          treeData:[],

          defaultProps: {
             children: 'children',
             label: 'label'
          }

        }
      },
      created(){
         this.imageHost = imageHost()
         this.fetchList();

         getSectionTree().then(response => {
               this.treeData=response.data;
               console.log(response);
         });

      },

      methods:{
        handleChange(value) {
              console.log(value);
              const lastElement = value[value.length - 1];
              console.log(lastElement); // 输出: 5

        },

        add(){
           this.$refs['addDialog'].showDialog();

        },
        // row item数据
        handleUpdate(row){
          this.$refs['updateDialog'].showDialog();
          Object.assign(this.form, row);
        },
        handleDelete(row){
          this.$refs['deleteDialog'].showDialog();
          // 根据id 删除数据
          this.formId=row.id;
        },
        // handleNodeClick(data,node,event) {
        //       console.log(data);
        //        // 获取父节点数据   该节点没有子节点
        //       if (data.children==null &&  node.parent && node.parent.data) {
        //         console.log('Parent node data:', node.parent.data);
        //         // 根据分类，模块名查询轮播图
        //         getBannerListBySection(node.parent.data.label,data.label).then(response => {
        //           console.log(response);
        //           this.tableData=response.data;
        //           this.listFilterFileType();

        //         });
        //       } else {
        //         console.log('This is the root node, no parent.');
        //       }
        // },

        fetchList(){
          //  this.params
          getBannerList(this.queryParams).then(response => {
               this.tableData=response.rows;
               this.listFilterFileType();
               this.total=response.total;
          });

        },
        listFilterFileType(){
            for (let i = 0; i < this.tableData.length; i++) {
                // console.log(this.tableData[i]);
                if(this.tableData[i].fileType === '1'){
                    this.tableData[i].fileTypeLable='图片'
                }else if(this.tableData[i].fileType === '2'){
                    this.tableData[i].fileTypeLable='视频'
                }else{
                    this.tableData[i].fileTypeLable='未知类型'
                }

            }
        },

        handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
               // console.log(`当前页: ${val}`);
              this.params.pageNum=val;
              this.fetchList();
        },
        onSubmitDelete(data){
            deleteBanner(data).then(response => {
              console.log(response);
              this.$refs['deleteDialog'].hideDialog();
              this.fetchList();

            });
        }


      }
    }
</script>

<style scoped>
  .page{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

  }

  .add{
    width: 60px;
    height: 30px;
    margin-left: 15px;
    background-color:#409EFF;
    border:none;
    border-radius: 5px;
    color: #ffffff;

  }
  .image{
    width: 50px;
    height: 50px;
  }
  .content{
      width: calc(100% - 40px);
      height: 100%;
      margin-left: 20px;
      margin-top: 20px;
      display: flex;
      flex-direction: row;
  }
  .activity{
      margin-left: 10px;
      width: 200px;
      height: auto;
      border: 1px #efefef solid;
      display: flex;

  }
  .activity_item{
      height: 45px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
  }
  .table_container{
      width: 100%;
      display: flex;
      flex-direction: column;

  }
  .pagination{
     align-self: flex-end;
     margin-top: 20px;
   }


.line_search{
  display: flex;
  padding: 20px;
  align-items: center;
}
</style>
